<template>
  <el-card shadow="never" class="aui-card--fill">
    <div class="mod-sys__log-operation">
      <el-form :inline="true" :model="dataForm" @submit.native.prevent  @keydown.enter.native.prevent="getDataList()">
        <el-form-item>
          <el-input v-model="dataForm.name" placeholder="用户名" clearable></el-input>
        </el-form-item>
        <!-- <el-form-item>
          <el-select filterable v-model="dataForm.status" placeholder="状态" clearable>
            <el-option label="失败" :value="0"></el-option>
            <el-option label="成功" :value="1"></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item>
          <el-button @click="getDataList()">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="info" @click="exportHandle()">导出</el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="dataListLoading" :data="dataList" border  style="width: 100%;">
        <el-table-column prop="requestUser" label="用户名" header-align="center" width="80" :show-overflow-tooltip="true" align="center"></el-table-column>
        <el-table-column prop="operation" label="用户操作" header-align="center" width="120" :show-overflow-tooltip="true"  align="center"></el-table-column>
        <el-table-column prop="requestUri" label="请求URI" header-align="center" width="150" :show-overflow-tooltip="true" align="center"></el-table-column>
        <el-table-column prop="requestMethod" label="请求方法" header-align="center" align="center"></el-table-column>
        <el-table-column prop="requestParams" label="请求参数" header-align="center" align="center" width="80" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="requestTime" label="耗时" sortable header-align="center" width="100" :show-overflow-tooltip="true" align="center">
          <template slot-scope="scope">
            {{ `${scope.row.requestTime}ms` }}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" header-align="center" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status === 0" size="small" type="danger">失败</el-tag>
            <el-tag v-else size="small" type="success">成功</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="ip" label="操作IP" header-align="center" width="90" :show-overflow-tooltip="true"  align="center"></el-table-column>
        <el-table-column prop="gmtCreate" label="创建时间" sortable header-align="center" align="center" width="180">
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="pageIndex"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        :total="totalPage"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="pageSizeChangeHandle"
        @current-change="pageCurrentChangeHandle">
      </el-pagination>
    </div>
  </el-card>
</template>

<script>
import servicesApi from '@/services/servicesApi'
export default {
  data() {
    return {
      // mixinViewModuleOptions: {
        // getDataListURL: '/sys/log/operation/page',
        // getDataListIsPage: true,
        // exportURL: '/sys/log/operation/export',
      // },
      dataForm: {
        status: '',
        name: '',
      },
      dataList: [
        {
          requestUser: 'admin',
          operation: '查询所有用户',
          requestUri: '/admin/showuser',
          requestMethod: 'POST',
          requestParams: '{"name":"","current":1,"size":10}',
          requestTime: 0,
          ip: 'http://192.168.43.102:8081',
          status: 1,
          gmtCreate: '2022-11-12 22:29:09',
        }
      ],               // 数据列表
      order: '',                  // 排序，asc／desc
      orderField: '',             // 排序，字段
      pageIndex: 1,                    // 当前页码
      pageSize: 10,                  // 每页数
      totalPage: 0,                   // 总条数
      dataListLoading: false,     // 数据列表，loading状态
      dataListSelections: [],     // 数据列表，多选项
      addOrUpdateVisible: false   // 新增／更新，弹窗visible状态
    }
  },
  created() { //页面创建时
      this.query()
  },
  methods: {
    // 获取数据列表
    query() {
      let pageInfo = {
        current: this.pageIndex,
        size: this.pageSize,
        name: this.dataForm.name,
      }
      this.dataListLoading = true
      servicesApi.getLogOperation(pageInfo).then(res => {
        this.dataListLoading = false
        let code = res.data.code
        let data = res.data.data
        let msg = res.data.msg
        if (code !== 200) {
          this.dataList = []
          this.total = 0
          return this.$message.error(msg)
        }
        this.dataList = data.list
        this.totalPage = data.total
      })
      // this.dataListLoading = true
      // this.$http.get(
      //   this.mixinViewModuleOptions.getDataListURL,
      //   {
      //     params: {
      //       order: this.order,
      //       orderField: this.orderField,
      //       pageIndex: this.mixinViewModuleOptions.getDataListIsPage ? this.pageIndex : null,
      //       pageSize: this.mixinViewModuleOptions.getDataListIsPage ? this.pageSize : null,
      //       ...this.dataForm
      //     }
      //   }
      // ).then(({ data: res }) => {
      //   this.dataListLoading = false
      //   if (res.code !== 0) {
      //     this.dataList = []
      //     this.totalPage = 0
      //     return this.$message.error(res.msg)
      //   }
      //   this.dataList = this.mixinViewModuleOptions.getDataListIsPage ? res.data.list : res.data
      //   this.totalPage = this.mixinViewModuleOptions.getDataListIsPage ? res.data.totalPage : 0
      // }).catch(() => {
      //  this.dataListLoading = false
      // })
    },
    // 多选
    dataListSelectionChangeHandle(val) {
      this.dataListSelections = val
    },
    // 排序
    dataListSortChangeHandle(data) {
      if (!data.order || !data.prop) {
        this.order = ''
        this.orderField = ''
        return false
      }
      this.order = data.order.replace(/ending$/, '')
      this.orderField = data.prop.replace(/([A-Z])/g, '_$1').toLowerCase()
      this.query()
    },
    // 分页, 每页条数
    pageSizeChangeHandle(val) {
      this.pageIndex = 1
      this.pageSize = val
      this.query()
    },
    // 分页, 当前页
    pageCurrentChangeHandle(val) {
      this.pageIndex = val
      this.query()
    },
    getDataList: function() {
      this.pageIndex = 1
      this.query()
    },

    // 关闭当前窗口
    closeCurrentTab(data) {
      let tabName = this.$store.state.contentTabsActiveName
      this.$store.state.contentTabs = this.$store.state.contentTabs.filter(item => item.name !== tabName)
      if (this.$store.state.contentTabs.length <= 0) {
        this.$store.state.sidebarMenuActiveName = this.$store.state.contentTabsActiveName = 'home'
        return false
      }
      if (tabName === this.$store.state.contentTabsActiveName) {
        this.$router.push({ name: this.$store.state.contentTabs[this.$store.state.contentTabs.length - 1].name })
      }
    },
    // 导出
    exportHandle() {
      servicesApi.LogErrorExport().then(res => {
        // console.log(res)
        try {
          // console.log(res.data)
          const blob = new Blob([res.data], {
            type: 'application/octet-stream'
          })
          const downloadElement = document.createElement('a')
          // 创建下载的链接
          // 兼容不同浏览器的URL对象
          const url = window.URL || window.webkitURL || window.moxURL;
          const href = url.createObjectURL(blob)
          downloadElement.href = href
          // 下载后文件名
          downloadElement.download = '异常日志.zip'
          document.body.appendChild(downloadElement)
          // 点击下载
          downloadElement.click()
          // 下载完成移除元素
          document.body.removeChild(downloadElement)
          // 释放掉blob对象
          url.revokeObjectURL(href)
          //编译文件完成后，进度条展示为100%100
          this.percentage = 100;
          //下载完成 可以重新点击按钮下载
          this.isDisabled = false;
        } catch (error) {
          // console.log('下载的文件出错', error)
        }
      })
      // var params = qs.stringify({
      //   'token': Cookies.get('token'),
      //   ...this.dataForm
      // })
      // window.location.href = `${window.SITE_CONFIG['apiURL']}${this.mixinViewModuleOptions.exportURL}?${params}`
    }
  }
}
</script>
